<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/datav.min.vue.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <title>排故返件看板</title>
  <style>
    html {
      background-image: url(../images/bg.jpg);
      color: #fff;
    }

    .header-title {
      font-size: 24px !important;
    }

    .el-form-item__label {
      color: #fff;
    }

    .el-table__header {
      color: red;
    }

    .el-form-item {
      margin-bottom: 0px;
    }

    .chart-title {
      text-align: center;
      color: #fff;
      padding-top: 5px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div style="padding:0 5px;">
      <div class="parallelogram header-outer">
        <el-row>
          <el-col :span="7" style="padding-left: 35px;">
            <img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" />
          </el-col>
          <el-col :span="10" class="header-title">
            <div class="parallelogram header-inner">
              排故返件看板
            </div>
          </el-col>
          <el-col :span="7" class="currentTime" style="padding-right: 35px;font-size: 18px;">
            {{currentTime}}
          </el-col>
        </el-row>
      </div>

      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :label-position="'left'"
        style="margin-top:5px;margin-bottom: 10px;">
        <el-form-item label="分厂:" prop="factoryid">
          <el-select v-model="queryInfo.factoryid" placeholder="请选择" clearable>
            <el-option v-for="f in factoryList" :key="f.factoryid" :label="f.factoryname" :value="f.factoryid">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="机型:">
          <el-select v-model="queryInfo.enginefamily" placeholder="请选择机型" filterable clearable>
            <el-option v-for="f in enginefamilyList" :key="f.enginefamily" :label="f.enginefamily"
              :value="f.enginefamily">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="要求完成时间:">
          <el-date-picker v-model="queryInfo.requirefinishtime" type="daterange" range-separator="至"
            value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="返件编号:">
          <el-autocomplete v-model.trim="queryInfo.dealfaultbillname" placeholder="请输入返件编号" :trigger-on-focus="false"
            :fetch-suggestions="getDealFaultBillNameAsync" :value-key="'dealfaultbillname'" :debounce="500"
            style="width:300px;">
          </el-autocomplete>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="searchData">查询</el-button>
          <el-button type="primary" icon="el-icon-download" size="small" @click="exportData">导出</el-button>
        </el-form-item>
      </el-form>

      <!-- 第一行图表 -->
      <el-row :gutter="10">
        <el-col :span="12">
          <dv-border-box-10>
            <div class="chart-title">返件数据统计</div>
            <div :style="{height:chartHeight + 'px'}" id="fanjianBar"></div>
          </dv-border-box-10>
        </el-col>
        <el-col :span="12">
          <dv-border-box-10>
            <div class="chart-title">各返件单位完成率统计</div>
            <div :style="{height:chartHeight + 'px'}" id="fanjianRate"></div>
          </dv-border-box-10>
        </el-col>
      </el-row>

      <!-- 各机型完成情况 -->
      <dv-border-box-10 style="margin-top: 10px;">
        <div class="chart-title">各机型完成情况</div>
        <div :style="{height:chartHeight + 'px'}" id="productfamilyChart"></div>
      </dv-border-box-10>

      <!-- 各单位完成情况 -->
      <dv-border-box-10 style="margin-top: 10px;">
        <div class="chart-title">各单位完成情况</div>
        <div :style="{height:chartHeight + 'px'}" id="factoryBar"></div>
      </dv-border-box-10>

      <!-- 本月返件数据统计--明细对话框 -->
      <el-dialog :title="totalBarDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="totalBarDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="totalBarDetail.dataList" stripe border>
          <el-table-column type="index" width="40px"></el-table-column>
          <el-table-column label="操作" width="100px;">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportTotalBarDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="机型" prop="enginefamily" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="返件编号" prop="dealfaultbillname" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="发动机号" prop="engineno" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号" prop="productname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次" prop="productbatchno" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出单位" prop="fromfactoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收单位" prop="factoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="排故进展" prop="status" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出时间" prop="fromtime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="要求完成时间" prop="requirefinishtime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="超期天数" prop="delaydays" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.delaydays > 0" :style="{color:scope.row.delaydays > 0 ? 'red':''}">
                {{scope.row.delaydays}} 天
              </span>
              <span v-else>0</span>
            </template>
            <template #header>
              <span>超期天数</span>
              <el-tooltip placement="top" width="500">
                <template #content>
                  <p>【超期天数】计算规格说明</p>
                  <p>接收单位已完成时: 超期天数 = 完成时间 - 要求完成时间</p>
                  <p>接收单位未完成时: 超期天数 = 当前时间 - 要求完成时间</p>
                  <p>【完成时间】取值规则如下：</p>
                  <p>若返件需故检，完成时间 = 返件完成时间。</p>
                  <p>若返件无需故检，完成时间 = 返件返回时间。</p>
                </template>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="接收时间" prop="recvfactorytime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="完成时间" prop="recvfactoryreturntime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故障内容" prop="faultdesc" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="是否故检" prop="ischeck" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="实物存放地" prop="entitystoragelocation" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="故检报告号" prop="faultcheckreportno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="修理文件号" prop="dealfileno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="提交故检时间" prop="faultcheckdate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告号录入日期" prop="faultcheckreportnodate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="修理文件录入时间" prop="jsdate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="返入时间" prop="returndate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告天数" prop="gjbgdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理文件天数" prop="xlwjdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理天数" prop="xldays" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleTotalBarCurrentChange"
          :current-page="totalBarDetail.queryInfo.currentPage" :page-sizes="[12]"
          :page-size="totalBarDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="totalBarDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 各机型完成情况--明细对话框 -->
      <el-dialog :title="enginefamilyDetail.title" :width="'98%'" :top="'10px'"
        :visible.sync="enginefamilyDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="enginefamilyDetail.dataList" stripe border>
          <el-table-column type="index" width="40px"></el-table-column>
          <el-table-column label="操作" width="100px;">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportEnginefamilyDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="机型" prop="enginefamily" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="返件编号" prop="dealfaultbillname" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="发动机号" prop="engineno" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号" prop="productname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次" prop="productbatchno" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出单位" prop="fromfactoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收单位" prop="factoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="排故进展" prop="status" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出时间" prop="fromtime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="要求完成时间" prop="requirefinishtime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="超期天数" prop="delaydays" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.delaydays > 0" :style="{color:scope.row.delaydays > 0 ? 'red':''}">
                {{scope.row.delaydays}} 天
              </span>
              <span v-else>0</span>
            </template>
            <template #header>
              <span>超期天数</span>
              <el-tooltip placement="top" width="500">
                <template #content>
                  <p>【超期天数】计算规格说明</p>
                  <p>接收单位已完成时: 超期天数 = 完成时间 - 要求完成时间</p>
                  <p>接收单位未完成时: 超期天数 = 当前时间 - 要求完成时间</p>
                  <p>【完成时间】取值规则如下：</p>
                  <p>若返件需故检，完成时间 = 返件完成时间。</p>
                  <p>若返件无需故检，完成时间 = 返件返回时间。</p>
                </template>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="接收时间" prop="recvfactorytime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="完成时间" prop="recvfactoryreturntime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故障内容" prop="faultdesc" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="是否故检" prop="ischeck" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="实物存放地" prop="entitystoragelocation" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="故检报告号" prop="faultcheckreportno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="修理文件号" prop="dealfileno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="提交故检时间" prop="faultcheckdate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告号录入日期" prop="faultcheckreportnodate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="修理文件录入时间" prop="jsdate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="返入时间" prop="returndate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告天数" prop="gjbgdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理文件天数" prop="xlwjdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理天数" prop="xldays" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleEnginefamilyDetailCurrentChange"
          :current-page="enginefamilyDetail.queryInfo.currentPage" :page-sizes="[12]"
          :page-size="enginefamilyDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="enginefamilyDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 完成率统计--明细对话框 -->
      <el-dialog :title="factoryFinishRateDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="factoryFinishRateDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="factoryFinishRateDetail.dataList" stripe border>
          <el-table-column type="index" width="40px"></el-table-column>
          <el-table-column label="操作" width="100px;">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportFactoryFinishRateDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="机型" prop="enginefamily" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="返件编号" prop="dealfaultbillname" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="发动机号" prop="engineno" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号" prop="productname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次" prop="productbatchno" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出单位" prop="fromfactoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收单位" prop="factoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="排故进展" prop="status" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出时间" prop="fromtime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="要求完成时间" prop="requirefinishtime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="超期天数" prop="delaydays" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.delaydays > 0" :style="{color:scope.row.delaydays > 0 ? 'red':''}">
                {{scope.row.delaydays}} 天
              </span>
              <span v-else>0</span>
            </template>
            <template #header>
              <span>超期天数</span>
              <el-tooltip placement="top" width="500">
                <template #content>
                  <p>【超期天数】计算规格说明</p>
                  <p>接收单位已完成时: 超期天数 = 完成时间 - 要求完成时间</p>
                  <p>接收单位未完成时: 超期天数 = 当前时间 - 要求完成时间</p>
                  <p>【完成时间】取值规则如下：</p>
                  <p>若返件需故检，完成时间 = 返件完成时间。</p>
                  <p>若返件无需故检，完成时间 = 返件返回时间。</p>
                </template>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="接收时间" prop="recvfactorytime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="完成时间" prop="recvfactoryreturntime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故障内容" prop="faultdesc" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="是否故检" prop="ischeck" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="实物存放地" prop="entitystoragelocation" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="故检报告号" prop="faultcheckreportno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="修理文件号" prop="dealfileno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="提交故检时间" prop="faultcheckdate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告号录入日期" prop="faultcheckreportnodate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="修理文件录入时间" prop="jsdate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="返入时间" prop="returndate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告天数" prop="gjbgdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理文件天数" prop="xlwjdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理天数" prop="xldays" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleFactoryFinishRateDetailCurrentChange"
          :current-page="factoryFinishRateDetail.currentPage" :page-sizes="[12]"
          :page-size="factoryFinishRateDetail.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="factoryFinishRateDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 本月各单位完成情况--明细对话框 -->
      <el-dialog :title="factoryDetail.title" :width="'98%'" :top="'10px'" :center="'center'"
        :visible.sync="factoryDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="factoryDetail.dataList" stripe border>
          <el-table-column type="index" width="40px"></el-table-column>
          <el-table-column label="操作" width="100px;">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportFactoryDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="机型" prop="enginefamily" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="返件编号" prop="dealfaultbillname" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="发动机号" prop="engineno" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号" prop="productname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次" prop="productbatchno" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出单位" prop="fromfactoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收单位" prop="factoryname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="排故进展" prop="status" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="返出时间" prop="fromtime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="要求完成时间" prop="requirefinishtime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="超期天数" prop="delaydays" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.delaydays > 0" :style="{color:scope.row.delaydays > 0 ? 'red':''}">
                {{scope.row.delaydays}} 天
              </span>
              <span v-else>0</span>
            </template>
            <template #header>
              <span>超期天数</span>
              <el-tooltip placement="top" width="500">
                <template #content>
                  <p>【超期天数】计算规格说明</p>
                  <p>接收单位已完成时: 超期天数 = 完成时间 - 要求完成时间</p>
                  <p>接收单位未完成时: 超期天数 = 当前时间 - 要求完成时间</p>
                  <p>【完成时间】取值规则如下：</p>
                  <p>若返件需故检，完成时间 = 返件完成时间。</p>
                  <p>若返件无需故检，完成时间 = 返件返回时间。</p>
                </template>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="接收时间" prop="recvfactorytime" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="完成时间" prop="recvfactoryreturntime" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故障内容" prop="faultdesc" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="是否故检" prop="ischeck" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="实物存放地" prop="entitystoragelocation" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="故检报告号" prop="faultcheckreportno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="修理文件号" prop="dealfileno" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="提交故检时间" prop="faultcheckdate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告号录入日期" prop="faultcheckreportnodate" width="100" show-overflow-tooltip
            :formatter="splitDate">
          </el-table-column>
          <el-table-column label="修理文件录入时间" prop="jsdate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="返入时间" prop="returndate" width="100" show-overflow-tooltip :formatter="splitDate">
          </el-table-column>
          <el-table-column label="故检报告天数" prop="gjbgdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理文件天数" prop="xlwjdays" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="修理天数" prop="xldays" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleFactoryDetailCurrentChange"
          :current-page="factoryDetail.queryInfo.currentPage" :page-sizes="[12]"
          :page-size="factoryDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="factoryDetail.total">
        </el-pagination>
      </el-dialog>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="module">
    import { exportExcelData, fetchSuggestion } from '../Scripts/hooks/useCommonMethod.js'
    import { barOption, colorList } from '../Scripts/hooks/chartConfig.js'
    import { getFactoryListByCode } from '../Scripts/hooks/fetchAPI.js'
    import { prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth } from '../Scripts/hooks/useDateShortCut.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    const app = new Vue({
      el: '#app',
      data: {
        splitDate,
        queryInfo: {
          factoryid: '',
          enginefamily: '',
          requirefinishtime: '',//要求完成时间
          dealfaultbillname: '',//返件编号
          currentPage: 1,
          pageSize: 10
        },
        currentTime: '',
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        factoryList: [],
        enginefamilyList: [],//机型
        // 返件数据统计--明细
        totalBarDetail: {
          dialogVisiable: false,
          queryInfo: { paramName: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        // 各机型完成情况
        enginefamilyDetail: {
          dialogVisiable: false,
          queryInfo: { paramName: '', enginefamily: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        // 各单位完成情况--明细
        factoryDetail: {
          dialogVisiable: false,
          queryInfo: { paramName: '', factoryname: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        // 各返件单位完成率统计--明细
        factoryFinishRateDetail: {
          dialogVisiable: false,
          queryInfo: { factoryname: '', paramName: '', currentPage: 1, pageSize: 12 },
          dataList: [], total: 0, title: ''
        },
        // echart加载中动画
        loadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#fff' },
        pickerOptions: { shortcuts: [prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth] },
        chartHeight: (window.innerHeight - 230) / 3,
      },
      methods: {
        // 获取机型列表
        async getEnginefamilyList() {
          const { data: { data, meta, total } } = await axios({
            method: 'POST',
            url: '../handler/board/DealFaultBillDashBoard.ashx?action=getEnginefamilyList',
            data: { type: 'getEnginefamilyList' }
          })
          this.enginefamilyList = data;
        },
        // 查询排故单号
        getDealFaultBillNameAsync(value, callback) {
          fetchSuggestion({ actionName: 'getDealFaultBillNameAsync', name: 'dealfaultbillname', value, callback })
        },
        // 返件数据统计--柱状图
        async getMonthTotalBarData() {
          const dom = document.getElementById("fanjianBar");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getMonthTotalBarData', {
            type: 'getMonthTotalBarData',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrTotal = [], arrFanChuQty = [], arrWillDelayQty = [], arrIntimeFinishQty = [],
            arrDelayNoFinish = [], arrDelayFinish = [], arrCheckQty = [], arrDealQty = [], arrGjToReturn = [];
          for (const i of data) {
            arrTotal.push(i.total);
            arrFanChuQty.push(i.fanChuQty);
            arrWillDelayQty.push(i.willDelayQty);
            arrIntimeFinishQty.push(i.intimeFinishQty);
            arrDelayFinish.push(i.delayFinish);
            arrDelayNoFinish.push(i.delayNoFinish);
            arrCheckQty.push(i.checkqty);
            arrDealQty.push(i.dealqty);
            arrGjToReturn.push(i.gjToReturn);
          }

          let option = barOption();
          option.legend.data = ['计划完成数(转出数)', '按时完成', '超期已完', '预超期',
            '超期未完', '待故检报告', '待修理文件', '待接收单位修理'];//设置图例文字
          option.xAxis.data = [""];
          option.yAxis[1].show = false;

          option.series[0] = _.merge(option.series[0], {
            name: '计划完成数(转出数)', data: arrTotal,
            label: { color: colorList.blue.color },
            itemStyle: { color: { colorStops: colorList.blue.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '按时完成', data: arrIntimeFinishQty,
            label: { color: colorList.green.color },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          option.series[2] = _.merge(_.cloneDeep(option.series[0]), {
            name: '超期已完', data: arrDelayFinish,
            label: { color: colorList.lightGreen.color },
            itemStyle: { color: { colorStops: colorList.lightGreen.colorStops } }
          });

          option.series[3] = _.merge(_.cloneDeep(option.series[0]), {
            name: '预超期', data: arrWillDelayQty,
            label: { color: colorList.orange.color },
            itemStyle: { color: { colorStops: colorList.orange.colorStops } }
          });

          option.series[4] = _.merge(_.cloneDeep(option.series[0]), {
            name: '超期未完', data: arrDelayNoFinish,
            label: { color: colorList.red.color },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });

          option.series[5] = _.merge(_.cloneDeep(option.series[0]), {
            name: '待故检报告', data: arrCheckQty,
            label: { color: colorList.perple.color },
            itemStyle: { color: { colorStops: colorList.perple.colorStops } }
          });

          option.series[6] = _.merge(_.cloneDeep(option.series[0]), {
            name: '待修理文件', data: arrDealQty,
            label: { color: colorList.pink.color },
            itemStyle: { color: { colorStops: colorList.pink.colorStops } }
          });

          option.series[7] = _.merge(_.cloneDeep(option.series[0]), {
            name: '待接收单位修理', data: arrGjToReturn,
            label: { color: '#29ced6' },
            itemStyle: { color: '#29ced6' }
          });

          chart.setOption(option);

          window.addEventListener('resize', () => {
            chart.resize();
          });

          chart.on('click', (params) => {
            if (params.value == 0) { return; }
            this.totalBarDetail.queryInfo.currentPage = 1;
            this.totalBarDetail.queryInfo.paramName = params.seriesName;
            this.totalBarDetail.title = "本月返件数据【" + params.seriesName + "】明细";
            this.totalBarDetail.dialogVisiable = true;
            this.getTotalBarDetail();
          })
        },
        // 返件数据统计--柱状图明细
        async getTotalBarDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getTotalBarDetail', {
            type: 'getTotalBarDetail',
            ...this.queryInfo,
            ...this.totalBarDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.totalBarDetail.dataList = data;
          this.totalBarDetail.total = total;
        },
        // 返件数据统计--柱状图明细导出
        exportTotalBarDetail() {
          const config = {
            url: '../handler/board/DealFaultBillDashBoard.ashx?action=exportTotalBarDetail',
            data: {
              type: 'exportTotalBarDetail',
              ...this.totalBarDetail.queryInfo,
              ...this.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 各单位完成情况--柱状图
        async getFactoryData() {
          const dom = document.getElementById("factoryBar");
          echarts.dispose(dom);
          var chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getFactoryData', {
            type: 'getFactoryData',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrFactory = [], arrTotal = [], arrFanChuQty = [], arrWillDelayQty = [], arrIntimeFinishQty = [],
            arrDelayNoFinish = [], arrDelayFinish = [], arrCheckQty = [], arrDealQty = [];;
          for (const i of data) {
            arrFactory.push(i.FACTORYNAME);
            arrTotal.push(i.total);
            arrFanChuQty.push(i.fanChuQty);
            arrWillDelayQty.push(i.willDelayQty);
            arrIntimeFinishQty.push(i.intimeFinishQty);
            arrDelayFinish.push(i.delayFinish);
            arrDelayNoFinish.push(i.delayNoFinish);
            arrCheckQty.push(i.checkqty);
            arrDealQty.push(i.dealqty);
          }

          let option = barOption({ isLableFormat: true, provideNumber: 4 });
          option.legend.data = ['计划完成数(转出数)', '按时完成', '超期已完', '预超期', '超期未完'];//设置图例文字
          option.xAxis.data = arrFactory;
          option.yAxis[1].show = false;

          option.series[0] = _.merge(option.series[0], {
            name: '计划完成数(转出数)', data: arrTotal,
            label: { color: colorList.blue.color },
            itemStyle: { color: { colorStops: colorList.blue.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '按时完成', data: arrIntimeFinishQty,
            label: { color: colorList.green.color },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          option.series[2] = _.merge(_.cloneDeep(option.series[0]), {
            name: '超期已完', data: arrDelayFinish,
            label: { color: colorList.lightGreen.color },
            itemStyle: { color: { colorStops: colorList.lightGreen.colorStops } }
          });

          option.series[3] = _.merge(_.cloneDeep(option.series[0]), {
            name: '预超期', data: arrWillDelayQty,
            label: { color: colorList.orange.color },
            itemStyle: { color: { colorStops: colorList.orange.colorStops } }
          });

          option.series[4] = _.merge(_.cloneDeep(option.series[0]), {
            name: '超期未完', data: arrDelayNoFinish,
            label: { color: colorList.red.color },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });

          chart.setOption(option);

          window.addEventListener('resize', () => {
            chart.resize();
          });

          chart.on('click', (params) => {
            if (params.value == 0) { return; }
            this.factoryDetail.queryInfo.currentPage = 1
            this.factoryDetail.queryInfo.factoryname = params.name
            this.factoryDetail.queryInfo.paramName = params.seriesName
            this.factoryDetail.title = "【" + params.name + "】本月各单位完成情况【" + params.seriesName + "】明细"
            this.factoryDetail.dialogVisiable = true
            this.getFactoryDetail()
          })
        },
        // 各单位完成情况--柱状图明细
        async getFactoryDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getFactoryDetail', {
            type: 'getFactoryDetail',
            ...this.queryInfo,
            ...this.factoryDetail.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.factoryDetail.dataList = data;
          this.factoryDetail.total = total;
        },
        // 各单位完成情况--柱状图明细导出
        exportFactoryDetail() {
          const config = {
            url: '../handler/board/DealFaultBillDashBoard.ashx?action=exportFactoryDetail',
            data: {
              type: 'exportFactoryDetail',
              ...this.factoryDetail.queryInfo,
              ...this.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 返件信息表格--导出
        exportData() {
          const config = {
            url: '../handler/board/DealFaultBillDashBoard.ashx?action=exportData',
            data: {
              type: 'exportData',
              ...this.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 各返件单位完成率统计--柱状图
        async getFactoryFinishRateBar() {
          const dom = document.getElementById("fanjianRate");
          echarts.dispose(dom);
          var chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);
          const { data: { data, meta, total } } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getFactoryFinishRate', {
            type: 'getFactoryFinishRate',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrFinishRate = [], arrIntimeFinishRate = [], arrFactory = [], arrFinishedQty = [], arrIntimeFinishedQty = [], arrTotal = [];
          for (const i of data) {
            arrFactory.push(i.factoryname);
            arrFinishRate.push(i.finishrate);
            arrIntimeFinishRate.push(i.intimefinishedrate);
            arrTotal.push(i.total);
            arrFinishedQty.push(i.finishedqty);
            arrIntimeFinishedQty.push(i.intimefinishedqty);
          }

          let option = barOption({ isLableFormat: true, provideNumber: 4 });
          option.legend.data = ['完成率', '按时完成率'];//设置图例文字
          option.xAxis.data = arrFactory;
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%"; };//y轴文字追加 `%`
          option.yAxis[1].show = false;

          option.series[0] = _.merge(option.series[0], {
            name: '完成率', data: arrFinishRate,
            barGap: '0.60',
            label: { color: colorList.green.color, formatter: '{c}%', fontSize: 12, rotate: 20 },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '按时完成率', data: arrIntimeFinishRate,
            label: { color: colorList.lightGreen.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.lightGreen.colorStops } }
          });

          chart.setOption(option);

          window.addEventListener('resize', () => {
            chart.resize();
          });

          chart.on('click', (params) => {
            if (params.value == 0) { return; }
            this.factoryFinishRateDetail.queryInfo.currentPage = 1;
            this.factoryFinishRateDetail.queryInfo.factoryname = params.name;
            this.factoryFinishRateDetail.queryInfo.paramName = params.seriesName;
            this.factoryFinishRateDetail.title = `${params.name}【${params.seriesName}】明细`;
            this.factoryFinishRateDetail.dialogVisiable = true;
            this.getFactoryFinishRateDetail();
          })
        },
        // 各返件单位完成率统计--明细
        async getFactoryFinishRateDetail() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getFactoryFinishRateDetail', {
            type: 'getFactoryFinishRateDetail',
            ...this.queryInfo,
            ...this.factoryFinishRateDetail.queryInfo
          });
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.factoryFinishRateDetail.dataList = data;
          this.factoryFinishRateDetail.total = total;
        },
        // 各返件单位完成率统计--明细导出
        exportFactoryFinishRateDetail() {
          const config = {
            url: '../handler/board/DealFaultBillDashBoard.ashx?action=exportFactoryFinishRateDetail',
            data: {
              type: 'exportFactoryFinishRateDetail',
              ...this.factoryFinishRateDetail.queryInfo,
              ...this.queryInfo
            }
          }
          exportExcelData(config, this);
        },
        // 查询按钮
        searchData() {
          this.getMonthTotalBarData();
          this.getFactoryData();
          this.getFactoryFinishRateBar();
          this.getProductFamilyChartData();
        },
        // 本月返件数据统计明细 当前页 变更
        handleTotalBarCurrentChange(newPage) {
          this.totalBarDetail.queryInfo.currentPage = newPage;
          this.getTotalBarDetail();
        },
        // 本月各单位完成情况明细 当前页 变更
        handleFactoryDetailCurrentChange(newPage) {
          this.factoryDetail.queryInfo.currentPage = newPage;
          this.getFactoryDetail();
        },
        // 各分厂完成率明细 当前页 变更
        handleFactoryFinishRateDetailCurrentChange(newPage) {
          this.factoryFinishRateDetail.queryInfo.currentPage = newPage;
          this.getFactoryFinishRateDetail();
        },
        // 各机型完成情况--柱状图
        async getProductFamilyChartData() {
          const dom = document.getElementById("productfamilyChart");
          echarts.dispose(dom);
          var chart = echarts.init(dom);
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getProductFamilyChartData', {
            type: 'getProductFamilyChartData',
            ...this.queryInfo
          })
          chart.hideLoading();
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrProductFamily = [], arrTotal = [], arrFanchuQty = [], arrIntimeFinishedQty = [];
          for (const i of data) {
            arrProductFamily.push(i.enginefamily);//机型
            arrTotal.push(i.total);//计划完成数
            arrFanchuQty.push(i.fanchuqty);//已转出
            arrIntimeFinishedQty.push(i.intimefinishedqty);//按时完成
          }

          let option = barOption({ isLableFormat: true, provideNumber: 4, showDataZoom: true, startValue: 0, endValue: 15 });
          option.legend.data = ['计划完成数(转出数)', '已转出', '按时完成'];//设置图例文字
          option.xAxis.data = arrProductFamily;
          option.yAxis[1].show = false;

          option.series[0] = _.merge(option.series[0], {
            name: '计划完成数(转出数)', data: arrTotal,
            label: { color: colorList.blue.color },
            itemStyle: { color: { colorStops: colorList.blue.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '按时完成', data: arrIntimeFinishedQty,
            label: { color: colorList.green.color, },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          chart.setOption(option);

          window.addEventListener('resize', () => {
            chart.resize();
          });

          chart.on('click', (params) => {
            if (params.value == 0) { return; }
            this.enginefamilyDetail.queryInfo.currentPage = 1;
            this.enginefamilyDetail.queryInfo.enginefamily = params.name;
            this.enginefamilyDetail.queryInfo.paramName = params.seriesName;
            this.enginefamilyDetail.title = `机型：【${params.name}】--【${params.seriesName}】明细`;
            this.enginefamilyDetail.dialogVisiable = true;
            this.getProductFamilyChartDetail();
          })
        },
        // 机型分布--明细数据
        async getProductFamilyChartDetail() {
          this.loading = true
          this.loadingText = '数据加载中...'
          const { data: res } = await axios.post('../handler/board/DealFaultBillDashBoard.ashx?action=getProductFamilyChartDetail', {
            type: 'getProductFamilyChartDetail',
            ...this.queryInfo,
            ...this.enginefamilyDetail.queryInfo
          })
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }

          this.enginefamilyDetail.dataList = res.data;
          this.enginefamilyDetail.total = res.total
        },
        // 机型分布明细 当前页 变更
        handleEnginefamilyDetailCurrentChange(newPage) {
          this.enginefamilyDetail.queryInfo.currentPage = newPage;
          this.getProductFamilyChartDetail();
        },
        // 机型分布--导出明细
        exportEnginefamilyDetail() {
          const config = {
            url: '../handler/board/DealFaultBillDashBoard.ashx?action=exportEnginefamilyDetail',
            data: {
              type: 'exportEnginefamilyDetail',
              ...this.queryInfo,
              ...this.enginefamilyDetail.queryInfo
            }
          }
          exportExcelData(config, this);
        }
      },
      async mounted() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 1000);
          const weekDayText = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][dayjs().format('d')];
          this.currentTime = `${dayjs().format('YYYY年MM月DD日')} ${weekDayText} ${dayjs().format('HH:mm')}`;
        }
        setTimeout(incrementNumber, 500);

        window.addEventListener('resize', () => {
          this.chartHeight = (window.innerHeight - 230) / 3;
        });

        const startOfThisYear = dayjs().startOf('year').format('YYYY-MM-DD');
        const today = dayjs().format('YYYY-MM-DD');
        this.queryInfo.requirefinishtime = [startOfThisYear, today];
        this.factoryList = await getFactoryListByCode({ factoryCode: '615|603|619', isMapping: '是' });
        this.getEnginefamilyList();
        this.getMonthTotalBarData();
        this.getFactoryData();
        this.getFactoryFinishRateBar();
        this.getProductFamilyChartData();
      }
    })
  </script>
</body>

</html>